<script setup lang="ts" name="JobEdit">
import Crontab from './Crontab/index.vue'
import { MISFIRE_POLICY_COLUMN, IS_CONCURRENT_COLUMN } from "@/views/monitor/job/const";
import { addJobApi, getJobApi, updateJobApi } from "@/api/monitor/job";

const { proxy } = getCurrentInstance();

const { sys_job_group, sys_job_status } = useDict("sys_job_group", "sys_job_status");

const emit = defineEmits(['closeDialog']);

const props = defineProps({
  id: {
    type: Number,
    default: null,
  },
  title: {
    type: String,
    default: false,
  }
});

// 表达式弹窗
const openCron = ref(false);

// 表达式
const expression = ref("");

// 定时任务表单
const jobFormRef = ref(null);

// 弹窗开关
const open = ref(false);

// 表单数据
const form = ref<JobRecord>({});

// 表单校验
const rules = ref({
  jobName: [
    { required: true, message: "任务名称不能为空", trigger: "blur" },
  ],
  jobGroup: [
    { required: true, message: "任务组名不能为空", trigger: "change" },
  ],
  invokeTarget: [
    { required: true, message: "调用目标字符串不能为空", trigger: "blur" },
  ],
  cronExpression: [
    { required: true, message: "cron执行表达式不能为空", trigger: "blur" },
  ],
  status: [
    { required: true, message: "状态不能为空", trigger: "change" },
  ],
});

// 加载
const loading = ref(false);

/** 获取定时任务详情 */
function getData() {
  reset();
  if (isEmpty(props.id)) {
    open.value = true;
  } else {
    getJobApi(props.id).then(response => {
      form.value = response.data;
      open.value = true;
    }).catch(err => {
      console.error(err)
      closeDialog(false);
    })
  }
}

/** 表单重置 */
function reset() {
  form.value = {
    jobId: null,
    jobName: null,
    jobGroup: null,
    invokeTarget: null,
    cronExpression: null,
    misfirePolicy: null,
    concurrent: null,
    status: null,
  };
}

/** 关闭弹窗 */
function closeDialog(refresh: boolean) {
  open.value = false;
  emit("closeDialog", refresh);
}


/** cron表达式按钮操作 */
function handleShowCron() {
  expression.value = form.value.cronExpression;
  openCron.value = true;
}

/** 确定后回传值 */
function crontabFill(value) {
  form.value.cronExpression = value;
}

/** 提交按钮 */
function submitForm() {
  // @ts-ignore
  jobFormRef.value.validate((valid: boolean) => {
    if (valid) {
      loading.value = true;
      if (isEmpty(form.value.jobId)) {
        addJobApi(form.value).then(() => {
          // @ts-ignore
          proxy.$modal.msgSuccess("新增成功");
          loading.value = false;
          closeDialog(true);
        }).catch(err => {
          console.error(err)
          loading.value = false;
        });
      } else {
        updateJobApi(form.value).then(() => {
          // @ts-ignore
          proxy.$modal.msgSuccess("修改成功");
          loading.value = false;
          closeDialog(true);
        }).catch(err => {
          console.error(err)
          loading.value = false;
        });
      }
    }
  })
}

watch(open, (val) => {
  if (!val) {
    closeDialog(false);
  }
});

getData();
</script>

<template>
  <!-- 定时任务编辑对话框 -->
  <el-dialog :title="title" v-model="open" width="700px" append-to-body :close-on-click-modal="false">
    <el-form ref="jobFormRef" :model="form" :rules="rules" :inline="true" label-width="100px">
      <el-form-item label="任务名称" prop="jobName">
        <el-input v-model="form.jobName" placeholder="请输入任务名称" />
      </el-form-item>
      <el-form-item label="任务组名" prop="jobGroup">
        <el-select v-model="form.jobGroup" placeholder="请选择任务组名">
          <el-option
              :label="item.label"
              :value="item.value"
              v-for="(item, index) in sys_job_group"
              :key="index"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="调用方法" prop="invokeTarget" class="item-describe">
        <template #label>
          <span>
             调用方法
             <el-tooltip placement="top">
                <template #content>
                   <div>
                      Bean调用示例：ryTask.ryParams('ry')
                      <br />Class类调用示例：com.bige.quartz.task.RyTask.ryParams('ry')
                      <br />参数说明：支持字符串，布尔类型，长整型，浮点型，整型
                   </div>
                </template>
                <icon-svg icon-name="QuestionFilled" />
             </el-tooltip>
          </span>
        </template>
        <el-input v-model="form.invokeTarget" placeholder="请输入调用目标字符串" />
      </el-form-item>
      <el-form-item label="cron表达式" prop="cronExpression" class="item-describe">
        <el-input v-model="form.cronExpression" placeholder="请输入cron执行表达式">
          <template #append>
            <el-button type="primary" @click="handleShowCron">
              生成表达式
              <icon-svg icon-name="time" class="el-icon--right" />
            </el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="执行策略" prop="misfirePolicy" class="item-describe">
        <el-radio-group v-model="form.misfirePolicy">
          <el-radio-button
              v-for="(item, index) in MISFIRE_POLICY_COLUMN"
              :key="index"
              :label="item.label"
              :value="item.value"
          />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否并发" prop="concurrent">
        <el-radio-group v-model="form.concurrent">
          <el-radio-button
              v-for="(item, index) in IS_CONCURRENT_COLUMN"
              :key="index"
              :label="item.label"
              :value="item.value"
          />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status" placeholder="请选择状态">
          <el-radio
              :value="item.value"
              v-for="(item, index) in sys_job_status"
              :key="index"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" v-debounce="submitForm" :loading="loading">确 定</el-button>
        <el-button @click="closeDialog(false)">取 消</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog title="Cron表达式生成器" v-model="openCron" width="600px" append-to-body destroy-on-close>

    <crontab ref="crontabRef" v-if="openCron" @hide="openCron=false" @fill="crontabFill" :expression="expression" />
  </el-dialog>
</template>

<style lang="scss" scoped>

</style>